<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>领导审批 - 员工请假审批系统</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/daisyui/4.12.10/full.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.7/axios.min.js"></script>
</head>
<body class="bg-base-200 min-h-screen">
<!-- 导航栏 -->
<div class="navbar bg-primary text-primary-content shadow-lg">
    <div class="navbar-start">
        <a href="/leave/" class="btn btn-ghost text-xl font-bold">
            <i class="fas fa-calendar-check mr-2"></i>
            请假审批系统
        </a>
    </div>
    <div class="navbar-center hidden lg:flex">
        <ul class="menu menu-horizontal px-1">
            <li><a href="/leave/" class="btn btn-ghost">首页</a></li>
            <li><a href="/leave/apply" class="btn btn-ghost">请假申请</a></li>
            <li><a href="/leave/manager" class="btn btn-ghost btn-active">领导审批</a></li>
            <li><a href="/leave/boss" class="btn btn-ghost">老板审批</a></li>
            <li><a href="/leave/monitor" class="btn btn-ghost">流程监控</a></li>
        </ul>
    </div>
</div>

<!-- 主要内容 -->
<div class="container mx-auto px-4 py-8">
    <!-- 页面标题 -->
    <div class="text-center mb-8">
        <h1 class="text-4xl font-bold text-base-content mb-4">
            <i class="fas fa-user-tie text-warning mr-3"></i>
            领导审批
        </h1>
        <p class="text-lg text-base-content/70">处理待审批的请假申请</p>
    </div>

    <!-- 统计卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div class="stat bg-base-100 shadow-xl rounded-2xl">
            <div class="stat-figure text-warning">
                <i class="fas fa-clock text-3xl"></i>
            </div>
            <div class="stat-title">待审批</div>
            <div class="stat-value text-warning" id="pendingCount">0</div>
            <div class="stat-desc">需要处理的申请</div>
        </div>
        <div class="stat bg-base-100 shadow-xl rounded-2xl">
            <div class="stat-figure text-success">
                <i class="fas fa-check-circle text-3xl"></i>
            </div>
            <div class="stat-title">已通过</div>
            <div class="stat-value text-success" id="approvedCount">0</div>
            <div class="stat-desc">今日已审批通过</div>
        </div>
        <div class="stat bg-base-100 shadow-xl rounded-2xl">
            <div class="stat-figure text-error">
                <i class="fas fa-times-circle text-3xl"></i>
            </div>
            <div class="stat-title">已驳回</div>
            <div class="stat-value text-error" id="rejectedCount">0</div>
            <div class="stat-desc">今日已驳回</div>
        </div>
    </div>

    <!-- 待审批任务列表 -->
    <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
            <div class="flex justify-between items-center mb-6">
                <h2 class="card-title text-2xl">
                    <i class="fas fa-list text-primary mr-2"></i>
                    待审批任务
                </h2>
                <button class="btn btn-primary" onclick="loadTasks()">
                    <i class="fas fa-sync-alt mr-2"></i>
                    刷新
                </button>
            </div>

            <!-- 任务列表 -->
            <div id="taskList" class="space-y-4">
                <!-- 任务项将通过JavaScript动态加载 -->
            </div>

            <!-- 空状态 -->
            <div id="emptyState" class="text-center py-12 hidden">
                <i class="fas fa-inbox text-6xl text-base-content/30 mb-4"></i>
                <h3 class="text-xl font-bold text-base-content/70 mb-2">暂无待审批任务</h3>
                <p class="text-base-content/50">所有任务都已处理完成</p>
            </div>
        </div>
    </div>
</div>

<!-- 审批模态框 -->
<dialog id="approvalModal" class="modal">
    <div class="modal-box w-11/12 max-w-2xl">
        <h3 class="font-bold text-lg mb-4">
            <i class="fas fa-gavel text-warning mr-2"></i>
            审批请假申请
        </h3>

        <!-- 申请详情 -->
        <div class="bg-base-200 rounded-lg p-4 mb-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="label">
                        <span class="label-text font-semibold">申请人</span>
                    </label>
                    <div class="text-lg" id="modalApplicant">-</div>
                </div>
                <div>
                    <label class="label">
                        <span class="label-text font-semibold">请假天数</span>
                    </label>
                    <div class="text-lg" id="modalDays">-</div>
                </div>
                <div class="md:col-span-2">
                    <label class="label">
                        <span class="label-text font-semibold">请假原因</span>
                    </label>
                    <div class="text-lg" id="modalReason">-</div>
                </div>
                <div>
                    <label class="label">
                        <span class="label-text font-semibold">开始日期</span>
                    </label>
                    <div class="text-lg" id="modalStartDate">-</div>
                </div>
                <div>
                    <label class="label">
                        <span class="label-text font-semibold">结束日期</span>
                    </label>
                    <div class="text-lg" id="modalEndDate">-</div>
                </div>
            </div>
        </div>

        <!-- 审批意见 -->
        <div class="form-control mb-6">
            <label class="label">
                <span class="label-text font-semibold">审批意见</span>
            </label>
            <textarea id="approvalComment" placeholder="请输入审批意见（可选）"
                      class="textarea textarea-bordered h-24"></textarea>
        </div>

        <!-- 审批按钮 -->
        <div class="modal-action">
            <button class="btn btn-success" onclick="approveTask('approved')">
                <i class="fas fa-check mr-2"></i>
                通过
            </button>
            <button class="btn btn-error" onclick="approveTask('驳回')">
                <i class="fas fa-times mr-2"></i>
                驳回
            </button>
            <button class="btn" onclick="document.getElementById('approvalModal').close()">取消</button>
        </div>
    </div>
</dialog>

<!-- 成功提示模态框 -->
<dialog id="successModal" class="modal">
    <div class="modal-box">
        <h3 class="font-bold text-lg text-success">
            <i class="fas fa-check-circle mr-2"></i>
            审批成功
        </h3>
        <p class="py-4" id="successMessage">审批操作已完成。</p>
        <div class="modal-action">
            <button class="btn btn-primary" onclick="document.getElementById('successModal').close(); loadTasks()">确定</button>
        </div>
    </div>
</dialog>

<script>
    let currentTaskId = null;

    // 页面加载时获取任务
    document.addEventListener('DOMContentLoaded', function() {
        loadTasks();
        loadApprovalStats(); // 加载审批统计数据
    });

    // 加载待审批任务
    async function loadTasks() {
        try {
            const response = await axios.get('/leave/manager/tasks');
            console.log(response);
            const tasks = response.data;

            const taskList = document.getElementById('taskList');
            const emptyState = document.getElementById('emptyState');

            if (tasks.length === 0) {
                taskList.innerHTML = '';
                emptyState.classList.remove('hidden');
            } else {
                emptyState.classList.add('hidden');
                taskList.innerHTML = tasks.map(task => createTaskCard(task)).join('');
            }

            // 更新统计
            document.getElementById('pendingCount').textContent = tasks.length;

        } catch (error) {
            console.error('加载任务失败:', error);
            document.getElementById('taskList').innerHTML =
                '<div class="alert alert-error"><i class="fas fa-exclamation-triangle mr-2"></i>加载任务失败，请刷新重试</div>';
        }
    }

    // 在现有loadTasks函数之后添加或整合以下代码
    async function loadApprovalStats() {
        try {
            const response = await axios.get('/api/approval-stats/today');
            const stats = response.data;
            console.log("stats" + stats.approvedCount)
            // 更新页面上的统计数字
            document.getElementById('approvedCount').textContent = stats.approvedCount;
            document.getElementById('rejectedCount').textContent = stats.rejectedCount;

        } catch (error) {
            console.error('加载审批统计数据失败:', error);
        }
    }

    // 创建任务卡片
    function createTaskCard(task) {
        const variables = task.variables || {};
        console.log(variables)
        const applicant = variables.applicant || '未知';
        const reason = variables.reason || '无';
        const days = variables.days || 0;
        const startDate = variables.startDate || '';
        const endDate = variables.endDate || '';

        return `
                <div class="card bg-base-100 border border-base-300 hover:shadow-lg transition-all duration-300">
                    <div class="card-body">
                        <div class="flex justify-between items-start">
                            <div class="flex-1">
                                <h3 class="card-title text-lg mb-2">
                                    <i class="fas fa-user text-primary mr-2"></i>
                                    ${applicant} 的请假申请
                                </h3>
                                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
                                    <div>
                                        <span class="font-semibold text-base-content/70">请假天数:</span>
                                        <span class="badge badge-primary ml-2">${days} 天</span>
                                    </div>
                                    <div>
                                        <span class="font-semibold text-base-content/70">开始日期:</span>
                                        <span class="ml-2">${startDate}</span>
                                    </div>
                                    <div>
                                        <span class="font-semibold text-base-content/70">结束日期:</span>
                                        <span class="ml-2">${endDate}</span>
                                    </div>
                                </div>
                                <div class="mt-3">
                                    <span class="font-semibold text-base-content/70">请假原因:</span>
                                    <p class="mt-1 text-base-content/80">${reason}</p>
                                </div>
                            </div>
                            <div class="flex flex-col space-y-2 ml-4">
                                <button class="btn btn-warning btn-sm" onclick="openApprovalModal('${task.taskId}', '${applicant}', '${reason}', ${days}, '${startDate}', '${endDate}')">
                                    <i class="fas fa-gavel mr-1"></i>
                                    审批
                                </button>
                            </div>
                        </div>
                        <div class="card-actions justify-end mt-4">
                            <div class="badge badge-outline">
                                <i class="fas fa-clock mr-1"></i>
                                任务ID:${task.taskId.substring(0, 8)}...
                            </div>
                        </div>
                    </div>
                </div>
            `;
    }

    // 打开审批模态框
    function openApprovalModal(taskId, applicant, reason, days, startDate, endDate) {
        currentTaskId = taskId;

        document.getElementById('modalApplicant').textContent = applicant;
        document.getElementById('modalReason').textContent = reason;
        document.getElementById('modalDays').textContent = days + ' 天';
        document.getElementById('modalStartDate').textContent = startDate;
        document.getElementById('modalEndDate').textContent = endDate;
        document.getElementById('approvalComment').value = '';

        document.getElementById('approvalModal').showModal();
    }

    // 审批任务
    async function approveTask(outcome) {
        if (!currentTaskId) return;

        const comment = document.getElementById('approvalComment').value;

        try {
            const response = await axios.post('/leave/manager/approve', {
                taskId: currentTaskId,
                approvalResult: outcome,
                comment: comment
            });

            if (response.data.success) {
                document.getElementById('approvalModal').close();
                document.getElementById('successMessage').textContent =
                    `审批${outcome}成功！${response.data.message || ''}`;
                document.getElementById('successModal').showModal();
            } else {
                alert('审批失败: ' + response.data.message);
            }
        } catch (error) {
            // <!--${task.id.substring(0, 8)}-->
            console.error('审批失败:', error);
            alert('审批失败，请重试');
        }
    }
</script>
</body>
</html>